<template>
    <div>
        <!-- <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="toDetail(item)" size="mini">Detail</el-button> -->
        <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="toModify(itemData)" size="mini">Modify</el-button>
        <el-popover
        placement="bottom"
        width="300"
        v-model="isShow">
            <div class="email-box">
                <div class="hd">Select E-mail Type</div>
                <div>
                    <el-checkbox-group 
                        v-model="etype"
                        :max="1">
                        <el-checkbox label="1">Public/workshop/Event with price</el-checkbox>
                        <el-checkbox label="2">Public/workshop/Event without price</el-checkbox>
                        <el-checkbox label="3">Online with price</el-checkbox>
                        <el-checkbox label="4">Online without price</el-checkbox>
                    </el-checkbox-group>
                    <div class="mail-btn-box">
                        <el-button size="mini" @click="onSendCancel()"  >cancel</el-button>
                        <el-button type="warning" @click="onSend(itemData)" size="mini" >Send</el-button>
                    </div>
                </div>
            </div>
            <el-button slot="reference" class="filter-item" size="mini" type="warning" icon="el-icon-edit">E-mail</el-button>
        </el-popover>
        <el-popover
            placement="bottom"
            width="155"
            trigger="click"
            >
            <div>
                <el-button v-if="itemData.status === 0 || itemData.status === 1 || itemData.status === 2 || itemData.status === 5" class="filter-item" style="margin-top: 10px; margin-left: 10px; width:110px;" size="mini"  type="primary" icon="el-icon-edit" @click="onDuplicate(itemData)">Duplicate</el-button>
                <el-button v-if="itemData.status === 1 || itemData.status === 2" class="filter-item" style="margin-top: 10px; margin-left: 10px; width:110px;" size="mini" type="primary" icon="icon iconfont icon-pause-symbol" @click="updateOrderHold(itemData.id)">Hold</el-button>
                <el-button v-if="itemData.status === 3" class="filter-item" style="margin-top: 10px; margin-left: 10px; width:110px;" size="mini" type="success" icon="icon iconfont icon-transfer" @click="updateOrderResume(itemData.id)">Resume</el-button>
                <el-button v-if="itemData.status !== 5" class="filter-item" style="margin-top: 10px; margin-left: 10px; width:110px;" size="mini" type="danger" icon="icon iconfont icon-remove-button" @click="updateOrderVoid(itemData.id)">Void</el-button>
                <el-button v-if="(itemData.status === 1 || itemData.status === 2) && itemData.ax_sync_payment_status === 0 && itemData.order_from === 3" class="filter-item" style="margin-top: 10px; width:110px;" size="mini" type="default" icon="el-icon-refresh" @click="sendSyncAx(itemData.id)">{{ $t('table.sync_ax') }}</el-button>
            </div>
            <el-button slot="reference" class="filter-item" size="mini" type="text" icon="el-icon-caret-bottom"> </el-button>
        </el-popover>
    </div>
</template>
<script>
import { fetchUpdateRemark, fetchUpdatePaymentRemark, fetchHold, fetchResume, fetchOrderVoid, fetchOrderEmail, fetchPostSyncAx } from '@/api/order'
import i18n from '@/lang/index'
export default {
    props: {
        list: Array,
        itemData: Object
    },
    data() {
        return {
            lang: i18n.locale,
            etype: [],
            item: this.itemData,
            isEditPayRemark: false,
            isShow: false,
            isShowBtn: false
        }
    },
    methods: {
        updateOrderRemark(index) {// 修改订单备注
            if (this.item.remark) {
                let data = {
                    id: this.item.id,
                    remark: this.item.remark
                }
                fetchUpdateRemark(this.item.id, data).then(() => {
                    this.$notify({
                        title: 'Message',
                        message: 'Success！',
                        type: 'success',
                        duration: 2000
                    })
                })
            }
            
        },
        updateOrderPaymentRemark(index) {// 修改订单备注
            if (this.item.paymentRemark) {
                let data = {
                    id: this.item.id,
                    remark: this.item.paymentRemark
                }
                fetchUpdatePaymentRemark(this.item.id, data).then(() => {
                    this.$notify({
                        title: 'Message',
                        message: 'Success！',
                        type: 'success',
                        duration: 2000
                    })
                })
            }
            
        },
        onDuplicate(item) {// 添加新订单
            this.$emit('on-duplicate', item)
        },
        updateOrderHold(id) {// 暂停订单
            fetchHold(id).then(() => {
                this.$emit('get-list')
                this.$notify({
                    title: 'Message',
                    message: 'Success！',
                    type: 'success',
                    duration: 2000
                })
            })
        },
        updateOrderResume(id) {// 继续订单
            fetchResume(id).then(() => {
                this.$emit('get-list')
                this.$notify({
                    title: 'Message',
                    message: 'Success！',
                    type: 'success',
                    duration: 2000
                })
            })
        },
        updateOrderVoid(id) {// 无效订单
            fetchOrderVoid(id).then(() => {
                this.$emit('get-list')
                this.$notify({
                    title: 'Message',
                    message: 'Success！',
                    type: 'success',
                    duration: 2000
                })
            })
        },
        toDetail(item) {
            this.$emit('to-detail', item)
        },
        toModify(item) {
            this.$emit('to-modify', item)
        },
        onSendCancel() {
            this.etype = []
            this.isShow = false
        },
        onSend(item) {
            let _this = this
            let params = {
                id: item.id,
                etype: this.etype.join()
            }
            if (this.etype.length > 0) {
                _this.isShow = false
                fetchOrderEmail(item.id, params).then(() => {
                    _this.etype = []
                    _this.$notify({
                        title: 'Message',
                        message: 'Success！',
                        type: 'success',
                        duration: 2000
                    })
                })
            } else { 
                this.$message.error('Please Select E-mail Type')
            }
        },
        sendSyncAx(id) { // 提交接口
            let _this = this
            this.$confirm('Are you sure to sync to POST?', 'Message', {
                confirmButtonText: 'Sync',
                cancelButtonText: 'Cancel',
                type: 'warning'
            }).then(() => {
                let postData = {
                    ax_sync_item_status: 0,
                    ax_sync_type: 1, // type:1 单个订单 type:2多个订单
                    order_no: id, // 单个订单id
                    region_code: 'HK'
                }
                fetchPostSyncAx(postData).then(() => {
                    _this.syncAxVisible = false
                    _this.$notify({
                        title: 'Message',
                        message: 'Success！',
                        type: 'success',
                        duration: 2000
                    })
                })
            })
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.email-box{
    line-height: 22px;
    .el-checkbox-group{
        margin-top: 10px;   
        margin-bottom: 10px;
        .el-checkbox{
            margin-left: 30px;
        }
    }
}
</style>
